<template>
  <div class="box">
    <h1 ref="username">{{ username }}</h1>
    <hr />
    <!--  1.在Left.vue中引入Count.vue组件 -->
    <Count :init="9"></Count>
    <hr />
    <button @click="changeH1Color">changeH1Color</button>
  </div>
</template>


<script>
// import { eventBus } from "../../eventBus.js";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Lefts",
  data() {
    return {
      username: "Left",
      sendToRightStr: "我是Left发送给Right的数据",
    };
  },
  methods: {
    changeName() {
      this.username = "Leddft";
    },
    sendToRight() {
      // 发送事件
      // eventBus.$emit("fromLeft", this.sendToRightStr);
    },
    changeH1Color() {
      // 2.通过$refs获取到h1标签
      this.$refs.username.style.color = "red";
    },
  },
};
</script>

<style scoped>
.Left {
  color: rgb(60, 32, 171);
}
/deep/ h5 {
  color: rgb(9, 202, 125);
}
</style>
